import Vue from "vue";
import VueRouter from "vue-router";

import HomeTwo from '@/pages/Home/HomeTwo.vue';


// 声明使用vue插件
Vue.use(VueRouter);
const router = new VueRouter({
    mode:"hash",//模式 路径后面 #
    // mode:"history",// 不加#
    routes:[//routes注册路由组件
        {
            path:'/register',
            name:'register',
            component:()=>import('@/pages/Register.vue')
        },
        {
            path:'/login',
            name:'login',
            component:()=>import("@/pages/Login.vue")
        },
        {
            path:'/vipchongzhi',
            name:'vipchongzhi',
            component:()=>import('@/pages/VipChongZhi.vue')
        },
        {
            path:'/duxiang',
            name:"duxiang",
            component:()=>import('@/pages/DuXiang.vue'),
            meta:{
                show:true
            },
            beforeEnter(to,from,next){
                console.log(to);
                console.log(from);
                next();
            }
        },
        {
            path:'/home',//路径 /  
            name:'home',//路由组件的名字
            // component:()=>import('@/pages/Home.vue')
            components:{
                default:()=>import('@/pages/Home.vue'),
                HomeOne:()=>import('@/pages/Home/HomeOne.vue'),
                HomeTwo
            },
            // 命名视图  一个路由路径 对应多个router-view
            // meta中可以配置每一个路由对象的信息
            meta:{
                show:true
            }
        },
        // 嵌套路由
        {
            path:'/cate',
            name:"cate",
            // component:()=>import('@/pages/Cate.vue'),
            components:{
                default:()=>import('@/pages/Cate.vue'),
                HomeOne:()=>import('@/pages/Home/HomeOne.vue')
            },
            children:[
                {
                    //注意：路径的写法可以全写 也可以简写注意不要在最前面加 /
                    // path:'/cate/catechildone',
                    path:'catechildone',
                    name:'catechildone',
                    component:()=>import('@/pages/CateChildOne.vue'),
                    children:[
                        {
                            // path:'/cate/catechildone/catechildsonone',
                            path:'catechildsonone',
                            name:'catechildsonone',
                            component:()=>import('@/pages/CateChildSonOne.vue')
                        }
                    ]
                }
            ],
            meta:{
                show:true
            }
        },
        {
            path:'/search',
            name:'search',//路由名字
            component:()=>import('@/pages/Search.vue'),
            // 别名
            alias:'/sousuo',
            children:[
                {
                    // path:'/search/detail/:stu_id/:student',
                    // path:'/search/detail',
                    path:'/search/detail/:stu_id',

                    name:'detail',
                    component:()=>import('@/pages/Detail.vue')
                }
            ],
            meta:{
                show:true
            }
        },
        {
            path:'/my',
            name:'my',
            component:()=>import('@/pages/My.vue'),
            meta:{
                show:true
            }
        },
        // 路由重定向
        {
            path:'/',
            // redirect后面可以跟对象也可以跟字符串
           /*  redirect:{
                // name:'cate'
                path:'/home'
            } */
            redirect:'/home'
        }
    ]
})
const vipArr = ['/cate'];
// 需求：跳转到vipArr当中的页面时就需要拦截不让进跳转到充值页面；其他（home my register login）组件可以放行
/* 
1.充值页面
2.如何跳转到充值页面 next(可以填写路径)

逻辑
to 目标路由
to.fullpath在vipArr数组中 不放行 进入充值页面
to.fullpath不在vipArr数组中 放行  

to.fullpath  字符串是否在vipArr数组内
数组查询
vipArr.indexOf(to.fullpath)>=0 就是存在在vipArr数组中 不放行 跳转到vipchongzhi

如果-1 不存在 放行


*/

// 路由前置守卫
router.beforeEach((to,from,next)=>{
    // console.log(to,from,next);
    // 目标路由
    console.log(to);
    // 起始路由
    console.log(from);
    // 放行
    console.log(next);

    // next();
    if(vipArr.indexOf(to.fullPath) >=0){
        next('/vipchongzhi')
    }else{
        next()
    }
})
// 路由后置守卫
router.afterEach((to,from)=>{
    console.log(to);
    console.log(from);
})
// 暴露路由器实例对象
export default router;
/* 
导航守卫（路由守卫）
全局守卫 组件守卫 独享守卫（单独路由守卫）

全局守卫
全局前置守卫  router.beforeEach
全局后置守卫  router.afterEach

组件守卫
beforeRouteEnter
beforeRouteLeave

独享守卫（单独路由守卫）
beforeEnter


*/


